import TauPage from '@/components/TauPage';
import TauActionPanel from '@/components/TauActionPanel';
import TauTable from '@/components/TauTable';
import { useStore } from '@/hooks';
import { Button, Tab } from '@alifd/next';
import { t } from '@lingui/macro';
import { uniqueId } from 'lodash';
import { observer } from 'mobx-react-lite';
import React, { useEffect } from 'react';
import { ENUMS, column, toSelectDataSource } from './stores/definitions';
import { toJS } from 'mobx';
import DrawerFooter from '@/components/DrawerFooter';

const tableId = uniqueId('tauTable-');

function Orders({ couponInfo, activityType, activity, onCancel, modal: orderMode }) {
  const { couponsTabStore: store } = useStore();

  useEffect(() => {
    store._params = couponInfo;
    store._activityType = activityType;
    return (() => {
      store.orderStatus = '0';
    });
  }, []);

  useEffect(() => { if (orderMode[1]?.startsWith?.('toClose')) handleCancel(); }, [orderMode]);

  // 获取列表数据
  const handleOnSearch = (params) => {
    const { upDate, ...searchArgs } = params.values;
    const [from, to] = upDate || [];
    store.search = {
      from,
      to,
      activityId: activity?.id,
      ...searchArgs,
    };
  };

  // Modal窗口关闭回调
  const handleCancel = () => {
    onCancel?.();
  };

  return (
    <TauPage className="page-container">
      <TauActionPanel
        onSearch={handleOnSearch}
        searchItems={[
          {
            name: 'upDate',
            type: 'date-range',
            props: {
              placeholder: [t`开始创建时间`, t`结束创建时间`],
            },
          },
          {
            name: 'state',
            type: 'select',
            props: {
              dataSource: toSelectDataSource(ENUMS.state),
              placeholder: t`请选择`,
            },
          },
        ]}
        keywordSearch={{
          // enabled: true,
          placeholder: t`请输入关键字搜搜`,
        }}
        className="action-panel"
      />
      <div className="content">
        <Tab
          defaultActiveKey="0"
          activeKey={store.orderStatus}
          onChange={(v) => {
            store.orderStatus = v;
          }}
        >
          {couponInfo?.map((item, i) => <Tab.Item title={item?.batchName} key={i} />)}
        </Tab>
        <TauTable
          instanceId={tableId}
          primaryKey="id"
          tableLayout="fixed"
          currentPage={store.pg.page}
          pageSize={store.pg.size}
          total={store.total}
          sort={store.tableSort}
          onFetch={(pg) => { store.pg = pg; }}
          loading={store.loading}
          dataSource={toJS(store.data)}
          columns={[
            { title: t`序号`, dataIndex: 'idx', width: 44, cell: (v, i) => store.idx(i) },
            column('couponBatchName', { width: 128 }),
            column('id', { width: 158 }),
            column('fullName', { width: 128 }),
            column('state', { width: 88 }),
            column('acquisitionTime', { width: 128 }),
            column('crDate', { width: 128 }),
          ]}
        />
      </div>
      <DrawerFooter>
        <Button style={{ marginLeft: 8 }} onClick={() => handleCancel()}>{t`取消`}</Button>
      </DrawerFooter>
    </TauPage>
  );
}

export default observer(Orders);
